<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入css重置样式 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入less样式文件 -->
    <link rel="stylesheet/less" href="./css/style.less">
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- 引入wow.js样式文件 -->
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <title>Document</title>
</head>

<body>
    <!-- 导航 -->
    <div class="header navbar-fixed-top">
        <div class="container">
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand wow fadeInDown" href="#">Spirit8</a>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="active wow fadeInDown" data-wow-delay="100ms"><a href="#HOME">HOME</a></li>
                                <li class="wow fadeInDown" data-wow-delay="200ms"><a href="#About">About</a></li>
                                <li class="wow fadeInDown" data-wow-delay="300ms"><a href="#SERVICES">SERVICES</a></li>
                                <li class="wow fadeInDown" data-wow-delay="300ms"><a href="#">portfolio</a></li>
                                <li class="wow fadeInDown" data-wow-delay="400ms"><a href="#">testimonials</a></li>
                                <li class="wow fadeInDown" data-wow-delay="500ms"><a href="#">CONTACT</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>

    <!-- 背景 -->
    <div class="banner">
        <video autoplay id="background" width="100%" muted loop>
            <source src="./img/banner.mp4" />
        </video>
    </div>
    <!-- Some words about us -->
    <div class="main" id="HOME">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="main-left wow fadeInLeft">
                        <img src="./img/33-spirit8-digital-agency_03.png" alt="">
                    </div>
                </div>
                <div class="col-lg-6 col-md-6">
                    <div class="main-right">

                        <div class="main-top wow fadeInUp">About us</div>

                        <div class="main-title wow fadeInDown">
                            <span>Some</span>
                            <span>words</span>
                            <span>about us</span>
                        </div>

                        <div class="main-font">
                            <p class="wow fadeInLeft">We love building and rebuilding brands through our </p>
                            <p class="wow fadeInRight">specific skills. Using colour, fonts, and illustration, we</p>
                            <p class="wow fadeInLeft">brand companies in a way they will never forget.</p>
                        </div>

                        <div class="main-list">
                            <ul>
                                <li class="wow fadeInDown" data-wow-delay="100ms">Mission - We deliver uniqueness and
                                    quality</li>
                                <li class="wow fadeInDown" data-wow-delay="200ms">Skills - Delivering fast and excellent
                                    results</li>
                                <li class="wow fadeInDown" data-wow-delay="300ms">Clients - Satisfied clients thanks to
                                    our experience</li>
                            </ul>
                        </div>

                        <div class="main-btn wow fadeInUp">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span>Browse our work</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Meet our team -->
    <div class="menu" id="About">
        <div class="container">
            <div class="row">
                <div class="menu-title wow fadeInDown">
                    <div>Meet</div>
                    <div>our team</div>
                </div>

                <div class="wow fadeInUp">
                    <img src="./img/33-spirit8-digital-agency3.png" class="center-block" alt="">
                </div>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                <div class="menu-box wow fadeInLeft" data-wow-delay="100ms">
                                    <div class="menu-img">
                                        <img src="http://fxl.web3v.work/img/logo.jpg" class="center-block" alt="">
                                    </div>

                                    <div class="menu-font">
                                        <div>Jason Statham</div>
                                        <div>Knife designer</div>
                                    </div>

                                    <div class="menu-list">
                                        <ul>
                                            <li>Do not seek to change what has come </li>
                                            <li>before. Seek to create that which has </li>
                                            <li>not.</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                </div>
            </div>
        </div>
    </div>

    <!-- take a look at our services -->
    <div class="submenu" id="SERVICES">
        <div class="submenu-title wow fadeInDown">take a look at our services</div>
        <div class="wow fadeInUp">
            <img src="./img/1.gif" class="center-block" alt="">
        </div>
        <div class="submenu-font wow fadeInDown">
            <div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book is a trea</div>
            <div>tise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
                "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="submenu-box wow fadeInLeft" data-wow-delay="100ms">
                        <div class="submenu-img">
                            <img src="./img/2.gif" class="center-block" alt="">
                        </div>
                        <div class="submenu-headline">
                            Web design
                        </div>
                        <div class="submenu-list">
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="submenu-box wow fadeInLeft" data-wow-delay="200ms">
                        <div class="submenu-img">
                            <img src="./img/3.gif" class="center-block" alt="">
                        </div>
                        <div class="submenu-headline">
                            Web design
                        </div>
                        <div class="submenu-list">
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="submenu-box wow fadeInRight" data-wow-delay="100ms">
                        <div class="submenu-img">
                            <img src="./img/4.gif" class="center-block" alt="">
                        </div>
                        <div class="submenu-headline">
                            Web design
                        </div>
                        <div class="submenu-list">
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <div class="submenu-box wow fadeInRight" data-wow-delay="200ms">
                        <div class="submenu-img">
                            <img src="./img/5.png" class="center-block" alt="">
                        </div>
                        <div class="submenu-headline">
                            Web design
                        </div>
                        <div class="submenu-list">
                            <ul>
                                <li>The first line of Lorem Ipsum, "Lorem </li>
                                <li>ipsum dolor sit amet..", comes from a </li>
                                <li>line in section 1.10.32.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="height: 513px;background-color:#070707 ;"></div>

    <!-- take a look at our work -->
    <div class="picture">
        <div class="picture-title wow fadeInDown">take a look at our work</div>
        <div class="wow fadeInUp">
            <img src="./img/1.gif" class="center-block" alt="">
        </div>
        <div class="picture-font wow fadeInDown">
            <div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of
                Good and Evil) by Cicero, written in 45 BC. This book </div>
            <div>is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
                Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in sec</div>
            <div>tion 1.10.32.</div>
        </div>
        <div>
            <div class="container">
                <div class="row">
                    <div class="picture-nav">
                        <div class="picture-navleft wow fadeInLeft">Filter by type</div>
                        <div class="picture-navright wow fadeInRight">
                            <ul>
                                <li>All |</li>
                                <li>Web design |</li>
                                <li>Mobile design |</li>
                                <li>Photograpy</li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img1.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInY">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInY">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInY">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInY">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img2.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                            <div class="picture-box wow flipInX">
                                <div class="work">
                                    <div class="work-img"><img src="./img/work-img3.png" class="center-block" alt="">
                                    </div>
                                    <div class="work-bg">
                                        <div>Trend and fashion</div>
                                        <div>Website design</div>
                                        <div>+</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div style="height: 562px;background-color: #020202;"></div>


    <!-- feel free to contact us -->
    <div class="menu-form">
        <div class="form-title wow fadeInDown">
            feel free to contact us
        </div>
        <div class="wow fadeInUp">
            <img src="./img/1.gif" class="center-block" alt="">
        </div>
        <div class="menu-top wow fadeInDown">
            <div>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
            </div>
            <div>of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very
                popular</div>
            <div>during the Renaissance. </div>
        </div>

        <div class="container">
            <div class="row">
                <div>
                    <!-- 左边 -->
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="form-left wow fadeInDown">
                            <span>Name</span>
                            <span>*</span>
                        </div>
                        <input type="text" class="input wow wow fadeInUp">
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <!-- 右边 -->
                        <div class="form-right wow fadeInDown">
                            <span>Email address</span>
                            <span>*</span>
                        </div>
                        <input type="text" class="input wow wow fadeInUp">
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <!-- 下面 -->
                        <div class="form-bottom wow fadeInDown">
                            <span>Message</span>
                            <span>*</span>
                        </div>
                        <input type="text" class="text wow wow fadeInUp">
                    </div>
                </div>
                <div class="form-btn wow fadeInUp">SEDN</div>
            </div>
        </div>
    </div>


    <!-- 底部 -->
    <div class="footer">
        <div class="wow fadeInLeft">
            <div class="footer-left">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
        </div>
        <div>
            <div class="footer-right">
                <div class="wow flipInX" data-wow-delay="100ms">
                    <img src="./img/facebook.png" alt="">
                </div>
                <div class="wow flipInX" data-wow-delay="200ms">
                    <img src="./img/twitter.png" alt="">
                </div>
                <div class="wow flipInX" data-wow-delay="300ms">
                    <img src="./img/google.png" alt="">
                </div>
                <div class="wow flipInX" data-wow-delay="400ms">
                    <img src="./img/linkedin.png" alt="">
                </div>
                <div class="wow flipInX" data-wow-delay="500ms">
                    <img src="./img/dribbble.png" alt="">
                </div>
            </div>
        </div>
    </div>

</body>
<!-- 引入less的JavaScript文件 -->
<script src="./js/less.js"></script>
<!-- 引入jq文件 -->
<script src="./js/jquery.js"></script>
<!-- 引入bootstrap的JavaScript文件 -->
<script src="./js/bootstrap.min.js"></script>
<!-- 引入wow.js的JavaScript文件 -->
<script src="./js/wow.min.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/loop.js"></script>
<script>
    // 初始化wow.js
    new WOW().init();

    // 设置视频播放速度
    document.querySelector('video').defaultPlaybackRate = 8.0;
    document.querySelector('video').play();
    document.querySelector('video').playbackRate = 8.0;

    // 初始化swiper
    var mySwiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    })        
</script>

</html>